<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            margin: 50px auto;

        }

        tr {
            text-align: center;
        }

        tr th,
        tr td {
            border: solid 1px red;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>银行卡总额</th>
            <th>水费</th>
            <th>电费</th>
            <th>网费</th>
            <th>银行卡余额</th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <script>
        //因为是初学者，所以要把简单问题复杂化，提升对代码的理解
        let list = []
        for (let i = 0; i < 4; i++) {
            list[i] = prompt('请依次输入银行卡总额，水费，电费，网费')
        }
        //这里获取的是伪数组
        let arr = document.querySelectorAll('td')
        //把伪数组转成真数组
        let newArr = Array.from(arr)
        //map方法无法遍历伪数组
        newArr.map((itme, index) => {
            newArr[index].innerHTML = `${list[index]}`
        }
        )
        // for (index in arr) {
        //     arr[index].innerHTML = `${list[index]}`
        // }
        newArr[newArr.length - 1].innerHTML = `${list[0] - list[1] - list[2] - list[3]}`
    </script>
</body>

</html>